<template>
	<div class="report">
		<div class="report-mask" v-if="isMask">
			<!-- 提示操作1 -->
			<div class="report-mask-toltip toltip-one" v-if="isTolTip === 1">
				<div class="report-mask-toltip-centen">
					此处是报告题纲，您可以添加或者删除报告题纲
				</div>
				<div class="report-mask-toltip-btm">
					<el-button type="text" @click="handMaskClose">跳过</el-button>
					<el-button type="text" @click="isTolTip++">下一步</el-button>
				</div>
			</div>
			<!-- 提示操作2 -->
			<div class="report-mask-toltip toltip-two" v-if="isTolTip === 2">
				<div class="report-mask-toltip-centen">
					此处是报告内容，点击可以直接编辑报告详情
				</div>
				<div class="report-mask-toltip-btm">
					<el-button type="text" @click="handMaskClose">跳过</el-button>
					<el-button type="text" @click="isTolTip++">下一步</el-button>
				</div>
			</div>
			<!-- 提示操作3 -->
			<div class="report-mask-toltip toltip-three" v-if="isTolTip === 3">
				<div class="report-mask-toltip-centen">
					此处是图表数据筛选条件，您可以在此进行图表数据的筛选
				</div>
				<div class="report-mask-toltip-btm">
					<el-button type="text" @click="handMaskClose">跳过</el-button>
					<el-button type="text" @click="isTolTip++">下一步</el-button>
				</div>
			</div>
			<!-- 提示操作4 -->
			<div class="report-mask-toltip toltip-four" v-if="isTolTip === 4">
				<div class="report-mask-toltip-centen">
					报告编辑完成之后，您可以在此进行导出
				</div>
				<div class="report-mask-toltip-btm">
					<el-button type="text" @click="isTolTip = 1">再看一遍</el-button>
					<el-button type="text" @click="handMaskClose">我已了解</el-button>
				</div>
			</div>
		</div>
		<div class="report-body">
			<!-- 标题 -->
			<div class="report-title">
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item :to="{ path: '/history1' }">我的分析</el-breadcrumb-item>
					<el-breadcrumb-item>{{ reportName }}</el-breadcrumb-item>
				</el-breadcrumb>

				<!-- 按钮 -->
				<div class="report-btn">
					<!-- 另存 -->
					<el-button type="default" @click="closedMaterOpen = true" round>另存报告</el-button>
					<el-button type="primary" @click="goWord" round>导出报告</el-button>
					<!-- 导出 -->

				</div>
			</div>
			<el-dialog title="新建题纲" :visible.sync="addFirstLevelNode" width="400px">
				<el-input v-model="addname" placeholder="请输入题纲名称"></el-input>
				<div slot="footer" class="dialog-footer">
					<el-button @click="addFirstLevelNode = false">取 消</el-button>
					<el-button type="primary" @click="addFirstLevelNodeHandle">确 定</el-button>
				</div>
			</el-dialog>
			<el-dialog title="导入图表" :visible.sync="addSecondNode" class="addSecondLevelNodeDialog" width="800px">

				<el-collapse v-model="activeNames" class="addSecondNode mb-16">
					<el-collapse-item v-for="(item, index) in template_list" :key="index" :name="index.toString()">
						<template slot="title">
							<!-- 一级节点标题处的复选框 -->
							<el-checkbox v-model="item.checked" :label="item.name" :indeterminate="isIndeterminate"
								@change="handleFirstLevelChange(item)"></el-checkbox>
							<!-- 显示已勾选的数量和总数量 -->
							({{ item.SecondLevelNode.length }}/{{ item.children.length }})
						</template>
						<div class="addSecondLevelNode" v-if="item.children && Array.isArray(item.children)">
							<!-- 二级节点复选框组 -->
							<!-- <el-checkbox-group v-model="SecondLevelNode" size="small">
								<el-checkbox v-for="(subitem, subindex) in item.children" :key="subindex"
									v-model="subitem.checked" :label="subitem.id" border
									@change="handleSecondLevelChange(subitem)">{{ subitem.name }}</el-checkbox>
							</el-checkbox-group> -->
							<el-checkbox v-for="(subitem, subindex) in item.children" :key="subindex"
								v-model="subitem.checked" :label="subitem.id" border
								@change="handleSecondLevelChange(subitem, item)">{{ subitem.name }}</el-checkbox>
						</div>
					</el-collapse-item>
				</el-collapse>

				<div slot="footer" class="dialog-footer">
					<el-button @click="addSecondNode = false">取 消</el-button>
					<el-button type="primary" @click="addSecondLevelNodeHandle">确 定</el-button>
				</div>
			</el-dialog>
			<!-- 内容 -->
			<div class="report-content">
				<div class="report-content-left" ref="leftPanel" @mousedown="startDragLeft">
					<div class="report-left-title">
						报告提纲
						<el-button size="mini" @click="addFirstLevelNode = true"><i class="fa-solid fa-plus"></i>
							新建题纲</el-button>

					</div>
					<div class="report-left-tree">
						<el-tree :data="left_data" :props="defaultProps" :default-expand-all="true"
							@node-drag-end="handleDragEnd" :allow-drop="allowDrop" :draggable="treeIsDraggable"
							class="flow-tree">
							<div class="custom-tree-node" slot-scope="{ data }" @click="handleNodeClick(data)">
								<div class="custom-tree-node__label">
									<span v-if="!data.editing">{{ data.name }}</span>
									<el-input v-else v-model="data.name" @blur="() => submitName(data)" size="mini"
										@keyup.enter.native="submitName(data)"></el-input>
								</div>
								<div class="custom-tree-node__add">
									<div v-if="data.isAdd" style="display: flex; align-items: center; gap: 16px;">

										<!-- 一级节点的更多按钮菜单 -->
										<el-popover placement="bottom" trigger="click" width="100"
											popper-class="more-menu" :visible-arrow="false"
											@show="showMenuHandle(data)">
											<i class="fa-solid fa-ellipsis-vertical" slot="reference"
												@click.stop.prevent style="width: 24px; text-align: right"></i>
											<el-button type="text" size="mini" @click.stop="enableEdit(data, true)"><i
													class="fa-regular fa-pen-to-square"></i>
												编辑名称</el-button>
											<el-button type="text" size="mini" @click.stop="addSecondNode = true"><i
													class="fa-solid fa-plus"></i>
												导入图表</el-button>
											<el-button type="text" size="mini" @click.stop="DelFirstlevelNode(data)"><i
													class="fa-regular fa-trash-can"></i>
												删除分组</el-button>
										</el-popover>
										<!-- 一级节点的更多按钮菜单 -->
									</div>
									<div v-else>
										<!-- 二级节点的编辑按钮 -->
										<i class="fa-regular fa-pen-to-square"
											@click.stop="enableEdit(data, false)"></i>
										<i class="fa-regular fa-trash-can" @click.stop="append(data)"></i>
									</div>
								</div>
							</div>
						</el-tree>
					</div>
				</div>
				<div class="report-content-body">
					<div
						style="font-size: 18px; font-weight: bold; border-bottom: 1px solid #e7e7e7; padding-bottom: 24px;">
						{{ reportName }}
					</div>
					<div class="report-content-box">
						<div class="report-content-temp" v-for="(item, index) in data" :key="index">
							<div class="report-content-temp-title" :id="item.id">{{ item.name }}</div>
							<!-- <el-input class="report-content-temp-title" v-model="item.name"
								@change="() => changeTitleHandle(item)" :id="item.id" placeholder="请输入题纲名称"></el-input> -->
							<div v-for="citem in item.children" :key="citem.num">
								<div class="report-content-temp-title1">{{ citem.name }}</div>
								<!-- <el-input class="report-content-temp-title1" v-model="citem.name"
									@change="() => changeTitleHandle(citem)" placeholder="请输入题纲名称"></el-input> -->
								<!-- 图表区域 -->
								<div v-if="citem.chartList.length > 0" class="report-content-temp-chart"
									@click.stop="showIsmodel(citem)">
									<i class="el-icon-circle-close" @click.stop="delChartHanlde(citem)"></i>
									<div class="report-content-temp-chart-temp"
										v-for="(chartInfo, index) in citem.chartList" :key="index">
										<div class="report-content-temp-chart-box" :id="citem.id" ref="mainchart"
											v-if="citem.id" :style="{ width: chartWidth + 'px' }">
										</div>
									</div>
								</div>
								<!-- 表格区域 -->

								<div class="report-content-temp-table" v-if="citem.tableData && ok == 1">
									<i class="el-icon-circle-close" @click="delTableHanlde(citem)"></i>
									<el-table max-height="500" :data="citem.tableData.rows"
										:row-class-name="tableRowClassName">
										<el-table-column v-for="(val, tindex) in citem.tableData.titles" :key="tindex"
											:prop="val.prop" :label="val.label" :show-overflow-tooltip="true"
											align="left">
											<!-- 纵向标题列（污染指标） -->

											<template slot-scope="scope">
												<div v-if="!val['isBtn']"
													@click="changeTypeName(val, scope.row, citem)">
													<span v-if="val.label != '类名称'">{{ scope.row[val.prop] }}</span>
													<span v-if="val.label == '类名称'"><i
															class="fa-regular fa-pen-to-square"
															style="color: #133fec"></i> {{ scope.row[val.prop] }}
													</span>
													<!-- a{{val['isBtn']}} -->
												</div>
												<div v-else>
													<el-button v-if="val.prop !== 'option'" size="mini"
														icon="el-icon-search"
														@click="handShowDrawe(val, scope.row, citem)">查看</el-button>
													<!-- <el-button class="del-btn" type="danger" size="mini"
														v-else>删除</el-button> -->
												</div>
											</template>
										</el-table-column>
									</el-table>
								</div>

								<el-input class="report-content-temp-texted" type="textarea"
									:autosize="{ minRows: 2, maxRows: 5 }"
									:placeholder="showPlaceholder ? '总结，从上图可以看出' : ''" v-model="citem.analysisSummary"
									@change="() => changSummary(citem)" @blur="blurHanlde(citem)"
									@focus="focusHanlde(citem)" :class="citem.fousShow ? 'inputaear' : ''">
								</el-input>
							</div>
						</div>
					</div>
				</div>
				<div class="report-content-right" @click.self="touchRIghtHandle" ref="rightPanel"
					@mousedown="startDragRight">
					<!-- 条件区域 -->
					<!-- TODO:展示写固定只做展示 -->
					<div class="report-content-right-model" v-if="!isModel">
						<i class="el-icon-s-data"></i>
						点击图表开始数据分析
					</div>
					<div class="report-content-right-nomodel" v-else @click="touchRIghtHandle">
						<!-- 标题 -->
						<div class="report-content-right-title">{{ rightChoiseName }}</div>

						<el-row type="flex" align="middle">
							<el-col :span="6"> 选择数据集 </el-col>
							<el-col :span="18">
								<el-select v-model="seletreportAnalysisId" placeholder="请选择" size="mini"
									class="full-width">
									<el-option v-for="(item, index) in small_data" :key="item.id" :label="item.name"
										:value="item.id">
									</el-option>
								</el-select>
							</el-col>
						</el-row>

						<div v-show="fisrtShow">
							<el-divider content-position="center">第一维度</el-divider>

							<el-row v-if="firstDimType == 'EntityType'" type="flex" align="middle">
								<el-col :span="6">实体类型</el-col>
								<el-col :span="18">
									<el-select v-model="selectEntityTypes" size="mini" class="full-width">
										<el-option v-for="item in entityTypesList" :key="item.index"
											:value="item.value">
										</el-option>
									</el-select>
								</el-col>
							</el-row>

							<el-row v-if="firstDimType == 'time'" type="flex" align="middle">
								<el-col :span="6">{{ this.firstDimFieldShow }}</el-col>
								<el-col :span="8">
									<el-date-picker v-model="startYear" size="mini" type="year" placeholder="开始年份"
										style="width: 100%" :clearable="false">
									</el-date-picker></el-col>
								<el-col :span="2" style="text-align: center">-</el-col>
								<el-col :span="8">
									<el-date-picker v-model="endYear" size="mini" type="year" placeholder="结束年份"
										style="width: 100%" :clearable="false">
									</el-date-picker></el-col>
							</el-row>

							<el-row v-if="firstDimType == 'rank'" type="flex" align="middle">
								<el-col :span="6">
									{{ this.firstDimFieldShow }}
								</el-col>
								<el-col :span="8"><el-input v-model="startYear" size="mini" type="number"
										placeholder="开始排名" style="width: 100%" :clearable="false"></el-input></el-col>
								<el-col :span="2" style="text-align: center">-</el-col>
								<el-col :span="8"><el-input v-model="endYear" size="mini" type="number"
										placeholder="末尾排名" style="width: 100%" :clearable="false"></el-input></el-col>
							</el-row>
						</div>

						<div v-show="secondShow">
							<el-divider content-position="center">第二维度</el-divider>

							<el-row v-if="secondDimType == 'time'" type="flex" align="middle">
								<el-col :span="6">{{ this.secondDimFieldShow }}</el-col>
								<el-col :span="8">
									<el-date-picker v-model="startRank" size="mini" type="year" placeholder="开始年份"
										style="width: 100%" :clearable="false">
									</el-date-picker></el-col>
								<el-col :span="2" style="text-align: center">-</el-col>
								<el-col :span="8">
									<el-date-picker v-model="endRank" size="mini" type="year" placeholder="结束年份"
										style="width: 100%" :clearable="false">
									</el-date-picker></el-col>
							</el-row>

							<el-row v-if="secondDimType == 'rank'" type="flex" align="middle">
								<el-col :span="6">
									{{ this.secondDimFieldShow }}
								</el-col>
								<el-col :span="8"><el-input v-model="startRank" size="mini" type="number"
										placeholder="开始排名" style="width: 100%" :clearable="false"></el-input></el-col>
								<el-col :span="2" style="text-align: center">-</el-col>
								<el-col :span="8"><el-input v-model="endRank" size="mini" type="number"
										placeholder="末尾排名" style="width: 100%" :clearable="false"></el-input></el-col>
							</el-row>
							<div class="switch-wrapper"
								v-if="this.secondDimRangeCustom == true || this.secondDimRangeCustom == false">
								<div class="switch-title">主路径选择</div>
								<div class="switch-content">
									<el-switch v-model="secondDimRangeCustom" style="display: block"
										active-color="#13ce66" inactive-color="#C0C4CC">
									</el-switch>
									<div class="switch-text">
										{{ secondDimRangeCustom ? "开" : "关" }}
									</div>
								</div>
							</div>
						</div>



						<div class="report-content-right-btn">
							<el-button size="mini" type="success" @click="changeRoportHanlde">立即分析</el-button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<el-dialog title="另存报告" :visible.sync="closedMaterOpen" width="450px">
			<el-row type="flex" align="top">
				<el-col :span="4" style="padding-top: 12px;">报告名称</el-col>
				<el-col :span="20">
					<el-input v-model="materialId" placeholder="请输入报告名称" />
					<div style="font-size: 12px; margin-top: 8px;">注：报告将保存在“我的分析”报告列表</div>
				</el-col>
			</el-row>

			<div slot="footer" class="dialog-footer">
				<el-button type="default" size="small" @click="closedMaterOpen = false">取消</el-button>
				<el-button type="primary" size="small" @click="closedVidioByMaterialId">确定</el-button>
			</div>
		</el-dialog>

		<!-- 关键字 -->
		<el-dialog title="温馨提示" width="332px" class="analyzepage-close" :visible.sync="delShow" :show-close="false">
			<div class="analyzepage-close__body">确定删除所选数据吗？</div>
			<div slot="footer" class="close-footer">
				<el-button @click="delShow = false">取 消</el-button>
				<el-button type="danger" @click="deldelCustomHandle">确定</el-button>
			</div>
		</el-dialog>
		<el-drawer title="关键词列表" custom-class="report-text-drawer" :visible.sync="drawerText">
			<div class="report-text-box">
				<!-- temp -->
				<!-- <div class="report-text-box-header">
					<div class="report-text-box-temp">
						<el-checkbox v-model="isTextAll">关键词列表</el-checkbox>
						<div>词频</div>
					</div>
				</div> -->
				<div class="report-text-box-body">
					<el-row :gutter="20" type="flex" style="font-size: 12px">
						<el-col :span="12" :offset="0">类内关键词</el-col>
						<el-col :span="12" :offset="0" style="text-align: right">词频</el-col>
					</el-row>

					<div class="report-text-box-temp" v-for="item in textList" :key="item.text">
						<div>{{ item.nodeName }}</div>
						<!-- <el-checkbox v-model="item.checked">{{ item.nodeName }}</el-checkbox> -->
						<div>{{ item.count }}</div>
					</div>
				</div>
				<!-- <div class="report-text-box-btm" @click="drawerText = false">保存</div> -->
			</div>
		</el-drawer>
		<!-- 类专利 -->
		<el-drawer title="专利列表" custom-class="report-subject-drawer" :visible.sync="drawerSubject">
			<!-- 内容区域 -->
			<div class="report-subject-right-body">
				<div class="report-subject-right-temp" v-for="(item, i) in dataList.records" :key="i">
					<!-- <el-checkbox class="report-subject-right-temp-checkbox" v-model="item.checked"></el-checkbox> -->
					<div class="report-subject-right-temp-body">
						<div class="report-subject-right-temp-title">
							{{ item.titleChinese }}
						</div>
						<div class="report-subject-right-temp-content">
							{{ item.titleEnglish }}
						</div>
						<div class="report-subject-right-temp-ul" v-if="!typeList == ''">
							<div class="report-subject-right-temp-li" v-for="item in item.typeList" :key="item.name">
								{{ item.standardizedApplicant }}
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 页数 -->
			<div class="report-subject-right-btm">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page.sync="nodecurrent" layout="prev, pager, next" :total="dataList.total">
				</el-pagination>
			</div>
		</el-drawer>
		<el-dialog title="创建自定义提纲" width="429px" class="analyzepage-dialog" :visible.sync="isanalyzepage"
			:show-close="false">
			<div class="analyzepage-dialog__body">
				<div class="analyzepage-dialog__body-temp">
					<div>提纲名称</div>
					<el-input class="analyzepage-dialog__body-temp-ipt" v-model="addname"
						placeholder="请输入自定义提纲名称"></el-input>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="isanalyzepage = false">取 消</el-button>
				<el-button type="primary" @click="addanalysisHandle">确认创建</el-button>
			</div>
		</el-dialog>

		<el-dialog title="正在下载，请等待" :visible.sync="loadDialogStatus" :close-on-click-modal="false"
			:close-on-press-escape="false" :show-close="false" width="20%">
			<div style="text-align: center">
				<el-progress type="circle" :percentage="percentage"></el-progress>
			</div>
			<!-- <div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="downClose">取消下载</el-button>
			</div> -->
		</el-dialog>

		<el-dialog title="更改类名" :visible.sync="changeNameOpen" width="450px" c>
			<el-row :gutter="20">
				<el-col :span="18"><el-input v-model="changeNameList.newClusterName" placeholder="请输入类名称" /></el-col>
				<el-col :span="6"><el-button type="primary" @click="changeNameConfirm">确 定</el-button></el-col>
			</el-row>
		</el-dialog>
	</div>
</template>

<script>
import { analysisList } from "@/api/modules/analysis";
import { subjectList } from "@/api/modules/subject";
import { subjectdatasetList } from "@/api/modules/subject_data";
import { Loading } from "element-ui";
import elementResize from 'element-resize-detector' // 尺寸监听组件
import {
	customList,
	delCustom,
	addCustom,
	templateList,
	editCustom,
	delFirstLevelNode,
} from "@/api/modules/custom";
import {
	getReportContent,
	customSort,
	saveReport,
	changeReport,
	sortModify,
	fetchReportTitle,
	fetchEntityTypes,
	uploadReportImage,
	exportWord,
	getClusterkeywords,
	getClusterPatents,
	getPathKeywords,
	getPathPatents,
	editClusterName,
} from "@/api/modules/report";
import * as echarts from "echarts";
export default {
	name: "ReportPage",
	data() {
		return {
			showPlaceholder: true,//报告说明默认文字
			delShow: false,//删除图表提示框
			isModel: false,//右侧分析条件框
			newClusterName: null,//修改类名称
			changeNameOpen: false,//修改类名称弹窗
			percentage: 0,
			loadDialogStatus: false,
			changeNameList: {
				outlineParamId: null,
				clusterId: null,
				oldClusterName: null,
				newClusterName: null,
				timeRange: null,
			},
			imgListCont: [],
			loading: false,
			endImgCont: null,
			nodecurrent: 1,
			midPush: {
				current: 1,
				size: 10,
				outlineParamId: null,
				NodeName: null,
			},
			nodesize: 10,
			rightChoiseName: "图表数据筛选",
			closedMaterOpen: false,
			materialId: "",
			value1: [new Date(), new Date()],
			selectData: {},
			isChart: false,
			drawerText: false, // 是否显示关键字
			drawerSubject: false, // 是否显示类专利

			data: [],
			defaultProps: {
				children: "children",
				label: "label",
			},
			select_id: "",
			isTextAll: false, // 是否全选关键词

			currentPage2: 10,
			dataList: [],
			isMask: false, // 初始化显示提示框
			isTolTip: 1, // 默认显示第一条
			isanalyzepage: false,
			addname: "",
			tableData: [],
			graph: {},
			left_data: [],
			search_name: "",
			small_data: [], //分析数据集下拉列表
			big_data: [],
			isSelect: false,
			isSubject: false,
			radio: "1",
			big_search: "",
			visible: false,
			template_list: [],
			templateIndex: 0,
			reportId: "",
			fousShow: true,
			select_name: [],
			selectBig_name: [],
			idArray: [],
			select_idList: [],
			startYear: "",
			endYear: "",
			fenxiID: "",
			userData: {},
			fisrtShow: false,
			firstDimType: "",
			secondShow: false,
			secondDimType: "",
			startRank: 0,
			endRank: 0,
			firstDimFieldShow: "",
			secondDimFieldShow: "",
			entityTypesList: [],
			selectEntityTypes: "",
			reportName: "", //报告名称
			seletreportAnalysisId: "", //分析条件选中的数据集ID
			ok: 0,
			textList: [],
			secondDimRangeCustom: false, //主路径开关
			moreMenuVisible: false, // 一级题纲更多菜单，默认隐藏
			editingNode: null, // 用于跟踪当前编辑的节点
			addFirstLevelNode: false,//显示新建一级题纲弹窗
			addSecondNode: false,//显示导入二级题纲弹窗
			SelectAllSecondLevelNode: false,//全选新建二级题纲
			selectedSecondLevelNodes: [],//存储全部二级题纲
			activeNames: [],//存储添加二级题纲时默认展开所有的el-collapse-item
			isIndeterminate: false,//属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果
			chartWidth: 0,// 中间图表的宽度
			treeIsDraggable: true,//题纲是否可拖动排序
			treeIsEditing: false, // 标志是否处于编辑模式
		};
	},
	watch: {
		isTextAll(val) {
			this.textList.map((res) => {
				res.checked = val;
				return res;
			});
		},
	},
	mounted() {
		const userDataFromLocalStorage = JSON.parse(
			localStorage.getItem("userData")
		);
		this.userData = userDataFromLocalStorage || {};
		this.reportId = this.$route.query.report;
		this.subjectdatasetListGo();
		this.getcustomList();
		this.getReportTitle();
		this.getEntityTypes();
		// this.selectData = this.data[0];

		// 初始化时更新图表宽度
		this.updateChartWidth();
		// 监听窗口大小变化
		window.addEventListener('resize', this.updateChartWidth);
	},
	beforeDestroy() {
		// 移除窗口大小变化监听
		window.removeEventListener('resize', this.updateChartWidth);
	},
	methods: {



		showMenuHandle(data) {
			// templateIds = 
			this.select_id = data.id;
			// this.addanalysisHandle();
		},
		// 在一级节点复选框的change事件中，更新一级节点及其下所有二级节点的选中状态
		// 处理一级节点的变化
		handleFirstLevelChange(item) {
			// 根据全选状态更新 selectedSecondLevelNodes 数组
			if (item.checked) {
				// 如果一级节点被选中，则将所有二级节点选中，并将其值存储到 SecondLevelNode 中
				item.children.forEach(subitem => {
					if (!item.SecondLevelNode.includes(subitem.id)) {
						item.SecondLevelNode.push(subitem.id);
					}
					subitem.checked = true
				});
				this.updateSelectedSecondLevelNodes();
			} else {
				item.children.forEach(subitem => {
					subitem.checked = false
					this.removeFromSelectedSecondLevelNodes(subitem.id); // 在这里调用移除方法
				});

			}

			// 更新 selectedSecondLevelNodes

		},

		// 处理二级节点的变化
		handleSecondLevelChange(subitem, all) {
			if (subitem.checked) {
				// 如果二级节点被选中，则将其值添加到 SecondLevelNode 数组中
				all.SecondLevelNode.push(subitem.id);
				if (all.SecondLevelNode.length == all.children.length) {
					all.checked = true
				}
				if (all.SecondLevelNode.length < 1) {
					all.checked = false
				}
				// this.updateSelectedSecondLevelNodes();
			} else {
				// 如果二级节点被取消选中，则从 SecondLevelNode 数组中移除其值
				const index = all.SecondLevelNode.indexOf(subitem.id);
				if (index !== -1) {
					all.SecondLevelNode.splice(index, 1);
				}

				if (all.SecondLevelNode.length < 1) {
					all.checked = false
				}

			}
			// 更新 selectedSecondLevelNodes
			this.updateSelectedSecondLevelNodes();
		},
		updateSelectedSecondLevelNodes() {
			this.selectedSecondLevelNodes = [];
			this.template_list.forEach(item => {
				this.selectedSecondLevelNodes.push(...item.SecondLevelNode);
			});
		},

		removeFromSelectedSecondLevelNodes(itemId) {
			this.template_list.forEach(item => {
				const index = item.SecondLevelNode.indexOf(itemId);
				if (index !== -1) {
					item.SecondLevelNode.splice(index, 1);
				}
			});

			this.updateSelectedSecondLevelNodes();
		},

		addSecondLevelNodeHandle() {
			// 新建二级题纲
			addCustom({
				parentId: this.select_id,
				templateIds: this.selectedSecondLevelNodes,
				reportId: this.reportId,
			}).then((res) => {
				if (res.code == 200) {
					this.addSecondNode = false;
					this.$message({
						message: res.msg,
						type: "success",
						showClose: true,
					});
					this.getcustomList();
				} else {
					this.$message({
						message: res.msg,
						type: "error",
						showClose: true,
					});
				}
			});
		},

		addFirstLevelNodeHandle() {
			// 新建一级题纲
			addCustom({
				name: this.addname,
				reportId: this.reportId,
			}).then((res) => {
				if (res.code == 200) {
					this.addname = "";
					this.addFirstLevelNode = false;
					this.$message({
						message: res.msg,
						type: "success",
						showClose: true,
					});
					this.getcustomList();
				} else {
					this.$message({
						message: res.msg,
						type: "error",
						showClose: true,
					});
				}
			});
		},
		//删除一级节点题纲
		DelFirstlevelNode(data) {
			// 确保 data 是一个数组
			if (!Array.isArray(data)) {
				data = [data];
			}

			// 初始化一个空数组，用于存放一级节点和二级节点的 ID
			let ids = [];

			// 遍历每个一级节点
			for (let i = 0; i < data.length; i++) {
				const topLevelNode = data[i];
				// 将一级节点的 ID 加入数组
				ids.push(topLevelNode.id);

				// 检查一级节点是否有子节点
				if (topLevelNode.children && topLevelNode.children.length > 0) {
					// 遍历每个二级节点
					for (let j = 0; j < topLevelNode.children.length; j++) {
						const secondLevelNode = topLevelNode.children[j];
						// 将二级节点的 ID 加入数组
						ids.push(secondLevelNode.id);
					}
				}
			}

			// 现在，ids 数组中包含了所有一级节点和二级节点的 ID
			// return ids;
			delFirstLevelNode({
				ids: ids,
			}).then((res) => {
				if (res.code == 200) {
					this.$message({
						message: res.msg,
						type: "success",
						showClose: true,
					});
					this.getcustomList();
				} else {
					this.$message({
						message: res.msg,
						type: "error",
						showClose: true,
					});
				}
			});
		},

		// 点击编辑按钮，启用编辑模式
		enableEdit(data, isTopLevel) {
			// 如果已经有节点处于编辑状态，则取消其编辑状态
			if (this.editingNode !== null) {
				this.editingNode.editing = false;
			}

			// 设置当前节点为编辑状态
			this.editingNode = data;
			data.editing = true;

			this.treeIsDraggable = false;//禁用题纲的拖动

			// 临时移除拖动事件监听器，禁用拖动功能
			this.isEditing = true; // 进入编辑模式，使题纲宽度不可拖动


			// 如果是顶级节点，记录当前编辑的节点类型
			if (isTopLevel) {
				this.editingNodeType = 'top'; // 设置为顶级节点
			} else {
				this.editingNodeType = 'sub'; // 设置为二级节点
			}
		},
		submitName(data) {
			// 保存编辑后的名称
			// 这里是您保存名称的逻辑
			if (data.name == "") {
				data.name = "请输入题纲名称";
			}
			editCustom({
				id: data.id,
				name: data.name,
			}).then((res) => {
				if (res.code == 200) {
					this.$message({
						message: res.msg,
						type: "success",
						showClose: true,
					});
				} else {
					this.$message({
						message: res.msg,
						type: "error",
						showClose: true,
					});
				}
			});

			// 保存完毕后，将当前节点的编辑状态重置为false，并更新 editingNode 变量
			data.editing = false;
			this.editingNode = null;
			this.treeIsDraggable = true;//启用题纲的拖动
			this.isEditing = false; // 退出编辑模式，使题纲宽度可拖动
		},
		cancelEdit() {
			// 取消编辑，将当前节点的编辑状态重置为false，并更新 editingNode 变量
			if (this.editingNode) {
				this.editingNode.editing = false;
				this.editingNode = null;
			}
		},
		// 更新图表宽度
		updateChartWidth() {
			const leftWidth = this.$refs.leftPanel.offsetWidth;
			const rightWidth = this.$refs.rightPanel.offsetWidth;
			const containerWidth = this.$el.offsetWidth;
			// 保证容器的最小宽度为 0，避免出现负数
			const chartWidth = (containerWidth - 48) - leftWidth - rightWidth;

			// 将计算后的宽度赋值给 chartWidth
			this.chartWidth = chartWidth;

		},
		startDragLeft(event) {
			// 如果处于编辑模式，则不执行拖动事件
			if (this.isEditing) {
				return;
			}

			// 记录初始点击位置和左侧面板宽度
			this.startX = event.clientX;
			this.startWidth = this.$refs.leftPanel.offsetWidth;

			// 添加mousemove和mouseup事件监听器
			document.addEventListener('mousemove', this.handleDragLeft);
			document.addEventListener('mouseup', this.stopDragLeft);

		},
		handleDragLeft(event) {
			// 计算鼠标移动距离
			const moveX = event.clientX - this.startX;

			// 更新左侧面板宽度
			this.$refs.leftPanel.style.width = this.startWidth + moveX + 'px';
			this.updateChartWidth();
		},
		stopDragLeft() {
			// 移除mousemove和mouseup事件监听器
			document.removeEventListener('mousemove', this.handleDragLeft);
			document.removeEventListener('mouseup', this.stopDragLeft);

		},

		startDragRight(event) {
			// 记录初始点击位置和左侧面板宽度
			this.startX = event.clientX;
			this.startWidth = this.$refs.rightPanel.offsetWidth;

			// 添加mousemove和mouseup事件监听器
			document.addEventListener('mousemove', this.handleDragRight);
			document.addEventListener('mouseup', this.stopDragRight);

		},
		handleDragRight(event) {
			// 计算鼠标移动距离
			const moveX = event.clientX - this.startX;

			// 更新左侧面板宽度
			this.$refs.rightPanel.style.width = this.startWidth - moveX + 'px';
			// 更新图表宽度

		},
		stopDragRight() {
			// 移除mousemove和mouseup事件监听器
			document.removeEventListener('mousemove', this.handleDragRight);
			document.removeEventListener('mouseup', this.stopDragRight);
			// this.updateChartWidth();
		},

		goHome() {
			this.$router.push('/login'); // 跳转到首页
		},
		loginOutHandle() {
			localStorage.clear();

			// 清除sessionStorage
			sessionStorage.clear();
			this.$router.replace({ path: "/login" });
			location.reload();
		},

		changeTypeName(val, e, citem) {
			this.changeNameList.newClusterName = null;
			if (val.label == "类名称") {
				if (citem.sort == 1) {
					this.changeNameList.clusterId = e.val0;
					this.changeNameList.oldClusterName = e.val1;

					this.changeNameList.timeRange = e.val3;
					this.changeNameList.outlineParamId = citem.paramConfigCustom.id;
				} else {
					this.changeNameList.clusterId = e.val2;
					this.changeNameList.oldClusterName = e.val3;
					this.changeNameList.timeRange = e.val1;
					this.changeNameList.outlineParamId = citem.paramConfigCustom.id;
				}

				this.changeNameOpen = true;
			} else {

			}
		},
		changeNameConfirm() {
			let params = new FormData();

			params.append("outlineParamId", this.changeNameList.outlineParamId);
			params.append("clusterId", this.changeNameList.clusterId);
			params.append("newClusterName", this.changeNameList.newClusterName);
			params.append("oldClusterName", this.changeNameList.oldClusterName);
			params.append("timeRange", this.changeNameList.timeRange);
			editClusterName(params)
				.then((res) => {
					this.changeNameOpen = false;
					this.getReportContentHandle();
				})
				.catch((err) => { });
		},
		goWord() {
			// let a = {
			// 	reportImagefiles:this.imgListCont,
			// 	id:this.reportId
			// }
			// var formData = new FormData();
			// formData.append( 'file',this.imgListCont)
			this.loadDialogStatus = true;
			this.percentage = 0;
			let params = new FormData();
			this.imgListCont.forEach((item) => {
				params.append("reportImagefiles", item);
			});
			params.append("id", this.reportId);
			uploadReportImage(params)
				.then((res) => {
					this.percentage = 30;
					exportWord({
						id: this.reportId,
					})
						.then((res) => {
							this.percentage = 50;
							const url = window.URL.createObjectURL(new Blob([res.data]));
							const link = document.createElement("a");
							link.href = url;
							link.setAttribute("download", this.reportName + ".docx"); // 设置文件名
							document.body.appendChild(link);
							link.click();
							this.percentage = 100;
							setTimeout(() => {
								this.loadDialogStatus = false;
							}, 500);
						})
						.catch((err) => { });
				})
				.catch((err) => { });
		},

		/* 另存报告弹窗 */
		closedVidioByMaterialId() {
			if (this.materialId == null || this.materialId.trim() == "") {
				this.$modal.msgWarning("素材id不能为空！");
			} else {
				this.saveOtherRepotr();
			}
		},

		changeTitleHandle(item) {
			if (item.name == "") {
				item.name = "请输入题纲名称";
			}
			editCustom({
				id: item.id,
				name: item.name,
			}).then((res) => {
				if (res.code == 200) {
					this.$message({
						message: res.msg,
						type: "success",
						showClose: true,
					});
				} else {
					this.$message({
						message: res.msg,
						type: "error",
						showClose: true,
					});
				}
			});
		},
		delChartHanlde(data) {
			changeReport({
				id: data.paramConfigCustom.id,
				delGraph: 1,
			}).then((res) => {
				if (res.code == 200) {
					this.$message({
						message: "删除成功",
						type: "success",
						showClose: true,
					});
					this.getcustomList();
					this.$forceUpdate();
				} else {
					this.$message({
						message: res.msg,
						type: "error",
						showClose: true,
					});
				}
			});
		},
		delTableHanlde(data) {
			changeReport({
				id: data.paramConfigCustom.id,
				delTable: 1,
			}).then((res) => {
				if (res.code == 200) {
					this.$message({
						message: "删除成功",
						type: "success",
						showClose: true,
					});
					data.tableData = {};
					this.$forceUpdate();
				} else {
					this.$message({
						message: res.msg,
						type: "error",
						showClose: true,
					});
				}
			});
		},
		changeRoportHanlde() {
			this.ok = 0;
			if (this.firstDimType == "time") {
				var startData1 = new Date(this.startYear).getFullYear();
				var endData1 = new Date(this.endYear).getFullYear();
			} else if (this.firstDimType == "rank") {
				var startData1 = this.startRank;
				var endData1 = this.endRank;
			} else if (this.firstDimType == "EntityType") {
				var startData1 = this.firstDimFieldShow;
			}

			if (this.secondDimType == "time") {
				var startData2 = new Date(this.startRank).getFullYear();
				var endData2 = new Date(this.endRank).getFullYear();
			} else if (this.secondDimType == "rank") {
				var startData2 = this.startRank;
				var endData2 = this.endRank;
			} else {
				var date3 = "";
				var date4 = "";
			}

			changeReport({
				id: this.fenxiID,
				analysisDatasetId: this.seletreportAnalysisId,
				firstDimRange:
					this.firstDimType === "EntityType"
						? this.firstDimFieldShow
						: startData1 + "-" + endData1,
				secondDimRange: this.secondShow ? startData2 + "-" + endData2 : "",
				secondDimRangeCustom: this.secondDimRangeCustom,
			}).then((res) => {
				if (res.code == 200) {
					this.getReportContentHandle();
				} else {
					this.$message({
						message: res.msg,
						type: "error",
						showClose: true,
					});
				}
			});
		},
		saveOtherRepotr() {
			saveReport({
				id: this.reportId,
				name: this.materialId,
			}).then((res) => {
				if (res.code == 200) {
					this.closedMaterOpen = false;
					this.$message({
						message: "另存成功",
						type: "success",
						showClose: true,
					});
					this.materialId = "";
				} else {
					this.$message({
						message: res.msg,
						type: "error",
						showClose: true,
					});
				}
			});
		},
		allowDrop(draggingNode, dropNode, type) {
			if (!dropNode.data.children && type == "inner") {
				return false;
			} else {
				return true;
			}
		},
		allowDrag(draggingNode) {
			return true;
		},
		handleDragEnd(draggingNode, dropNode, dropType, ev) {
			if (dropType == "after") {
				var id = draggingNode.data.id;
				var afterid = dropNode.data.id;
				sortModify({
					id: id,
					preOutlineId: afterid,
				}).then((res) => {
					if (res.code == 200) {
						this.getcustomList();
					} else {
						this.$message({
							message: res.msg,
							type: "error",
							showClose: true,
						});
					}
				});
			} else if (dropType == "before") {
				var id = dropNode.data.id;
				var afterid = draggingNode.data.id;
				this.left_data.forEach((item) => {
					item.children.forEach((val, index) => {
						if (val.id == dropNode.data.id) {
							if (index > 0) {
								afterid = item.children[index - 1].id;
							} else {
								afterid = null;
							}
						}
					});
				});
				sortModify({
					id: id,
					preOutlineId: afterid,
				}).then((res) => {
					if (res.code == 200) {
						this.getcustomList();
					} else {
						this.$message({
							message: res.msg,
							type: "error",
							showClose: true,
						});
					}
				});
			}
		},
		clickSmallHandle() {
			this.isSelect = !this.isSelect;
			if (this.isSubject) {
				this.isSubject = false;
			}
		},
		clickBigHanlde() {
			this.isSubject = !this.isSubject;
			if (this.isSelect) {
				this.isSelect = false;
			}
		},
		touchRIghtHandle() {
			if (this.isSubject) {
				this.isSubject = false;
			}
			if (this.isSelect) {
				this.isSelect = false;
			}
		},

		blurHanlde(item) {
			if (item.analysisSummary === '') {
				//鼠标离开显示placehoder
				this.showPlaceholder = true;
			}
			item.fousShow = true;
		},
		focusHanlde(item) {
			this.showPlaceholder = false; //鼠标点击隐藏placehoder
			item.fousShow = false;
		},
		tableRowClassName({ row, rowIndex }) {
			if (rowIndex % 2 === 1) {
				return "warning-row";
			} else {
				return "success-row";
			}
		},
		changSummary(item) {
			editCustom({
				id: item.id,
				name: item.name,
				analysisSummary: item.analysisSummary,
			}).then((res) => {
				if (res.code == 200) {
					this.$message({
						message: res.msg,
						type: "success",
						showClose: true,
					});
				} else {
					this.$message({
						message: res.msg,
						type: "error",
						showClose: true,
					});
				}
			});
		},
		showIsmodel(data) {
			this.rightChoiseName = data.name;
			// this.small_data.forEach((item) => {
			//   item.value = false;
			// });
			this.fisrtShow = false;
			this.secondShow = false;
			this.firstDimType = "";
			this.startYear = "";
			this.endYear = "";
			this.secondDimType = "";
			this.startRank = "";
			this.endRank = "";
			// this.search_name = [];
			// this.select_id = [];
			// this.select_name = [];
			this.select_idList = [];
			// this.small_data.forEach((item) => {
			//   if (item.id == data.paramConfigCustom.analysisDatasetId) {
			//     // this.select_name.push(item.name);
			//     this.select_idList.push(data.paramConfigCustom.id);
			//     // item.value = true;
			//   }
			// });
			this.fenxiID = data.paramConfigCustom.id;
			this.isModel = true;

			if (data.paramConfigCustom.dimension == 1) {
				this.firstDimFieldShow = data.paramConfigCustom.firstDimFieldShow;

				this.startYear = data.paramConfigCustom.firstDimRangeStart;
				this.endYear = data.paramConfigCustom.firstDimRangeEnd;

				this.fisrtShow = true;
				if (data.paramConfigCustom.firstDimType == "TIME") {
					this.firstDimType = "time";
				}
				if (data.paramConfigCustom.firstDimType == "RANK") {
					this.firstDimType = "rank";
				}
			} else if (data.paramConfigCustom.dimension == 2) {
				this.firstDimFieldShow = data.paramConfigCustom.firstDimFieldShow;
				this.secondDimFieldShow = data.paramConfigCustom.secondDimFieldShow;

				this.startYear = data.paramConfigCustom.firstDimRangeStart;
				this.endYear = data.paramConfigCustom.firstDimRangeEnd;

				this.startRank = data.paramConfigCustom.secondDimRangeStart;
				this.endRank = data.paramConfigCustom.secondDimRangeEnd;
				// 主路径选择
				// this.secondDimRangeCustom = Boolean(
				// 	data.paramConfigCustom.secondDimRangeCustom
				// );
				this.secondDimRangeCustom = JSON.parse(data.paramConfigCustom.secondDimRangeCustom) //将主路径开关转换为布尔值并赋值

				this.fisrtShow = true;
				this.secondShow = true;
				if (data.paramConfigCustom.firstDimType == "TIME") {
					this.firstDimType = "time";
				}
				if (data.paramConfigCustom.firstDimType == "RANK") {
					this.firstDimType = "rank";
				}
				if (data.paramConfigCustom.secondDimType == "TIME") {
					this.secondDimType = "time";
				}
				if (data.paramConfigCustom.secondDimType == "RANK") {
					this.secondDimType = "rank";
				}
				if (data.paramConfigCustom.firstDimType == "EntityType") {
					this.firstDimType = "EntityType";
					this.selectEntityTypes = data.paramConfigCustom.firstDimFieldShow;
				}
			}
		},
		subjectdatasetListGo() {
			// subjectList({
			//   name: this.big_search,
			// }).then((res) => {
			//   if (res.code == 200) {
			//     this.big_data = res.rows;
			//   } else {
			//     this.$message({
			//       message: res.msg,
			//       type: "error",
			//       showClose: true,
			//     });
			//   }
			// });
			analysisList({
				name: "",
			}).then((res) => {
				if (res.code == 200) {
					this.small_data = res.rows;
				} else {
					this.$message({
						message: res.msg,
						type: "error",
						showClose: true,
					});
				}
			});
		},
		scrollToSection(id) {

			const element = document.getElementById(id);

			if (element) {
				// const offset = 20; // 可以根据需要调整偏移量
				element.scrollIntoView({
					behavior: "smooth",
					block: "center",
					inline: "nearest",
				});
			}
		},
		getTemplateIndex(data) {
			let index = this.left_data.findIndex((item) => item.id == data.id);
			this.templateIndex = index;
		},
		addSecondNodeHandle(val) {
			this.addname = val.id.split(",");
			this.select_id = this.left_data[this.templateIndex].id;
			this.addanalysisHandle();
		},
		addanalysisHandle() {
			addCustom({
				templateIds: this.addname,
				parentId: this.select_id,
				reportId: this.reportId,
			}).then((res) => {
				if (res.code == 200) {
					this.addname = "";
					this.isanalyzepage = false;
					this.$message({
						message: res.msg,
						type: "success",
						showClose: true,
					});
					this.getcustomList();
				} else {
					this.$message({
						message: res.msg,
						type: "error",
						showClose: true,
					});
				}
			});
		},
		addCustomhadnle(data) {
			this.select_id = data.id;
			this.isanalyzepage = true;
		},
		getcustomList() {
			this.data = [];
			customList(`?reportId=${this.reportId}`).then((res) => {
				if (res.length > 0) {
					res.forEach((item) => {
						if (!item.children) {
							item.children = [];
						}
					});
					this.left_data = res;
					this.left_data.forEach((item) => {
						this.$set(item, "isAdd", true);
						this.$set(item, "editing", false);//为一级节点添加editing属性
					});

					this.data = res;
					this.data.forEach((item) => {
						item.children.forEach((val) => {
							val.chartList = [
								{
									chartType: "line",
								},
							];
							this.$set(val, "fousShow", true);
							this.$set(val, "editing", false);//为二级节点添加editing属性

							val.tableData = {
								rows: [],
								titles: [],
							};
						});
					});
					this.idArray = [];

					this.data.forEach((item) => {
						item.children.forEach((v) => {
							this.idArray.push(v.id);
						});
					});
					this.templateListHandle();
				}
			});
		},
		getReportTitle() {
			fetchReportTitle(this.reportId).then((res) => {
				this.reportName = res.data.name;
				this.seletreportAnalysisId = res.data.analysisDatasetId;
			});
		},
		getEntityTypes() {
			fetchEntityTypes().then((res) => {
				this.entityTypesList = res.data;
			});
		},
		handGo() {
			this.$router.back(); // 返回上一级界面
			// if (this.$store.state.index.routerPath !== "") {
			// 	if (
			// 		this.$router.currentRoute.path !== this.$store.state.index.routerPath
			// 	) {
			// 		this.$router.push(this.$store.state.index.routerPath);
			// 	}
			// }
		},
		// 切换类型
		handSelectChange(item) {
			this.selectData = item;
		},
		// 图表
		handAddChart() {
			this.isChart = false;
		},
		deldelCustomHandle() {
			//删除自定义二级题纲
			delFirstLevelNode({
				ids: this.select_id
			}).then((res) => {
				if (res.code == 200) {
					this.$message({
						message: res.msg,
						type: "success",
						showClose: true,
					});
					this.delShow = false;
					this.getcustomList();
				} else {
					this.$message({
						message: res.msg,
						type: "error",
						showClose: true,
					});
				}
			});
		},
		append(data) {
			this.select_id = data.id.split(",");
			this.delShow = true;
		},

		remove(node, data) {
			const parent = node.parent;
			const children = parent.data.children || parent.data;
			const index = children.findIndex((d) => d.id === data.id);
			children.splice(index, 1);
		},

		templateListHandle() {
			templateList(`?reportId=''`).then((res) => {
				if (res.length > 0) {
					this.template_list = res;
					this.activeNames = this.template_list.map((item, index) => index.toString()); // 设置activeNames以包含所有折叠项目名称
					// 遍历数据，为每个节点添加 checked 属性
					this.template_list.forEach(item => {
						this.$set(item, 'checked', false); // 使用 $set 方法添加 checked 属性
						this.$set(item, 'SecondLevelNode', []); // 使用 $set 方法添加 checked 属性

						if (item.children) {
							item.children.forEach(subitem => {
								this.$set(subitem, 'checked', false); // 使用 $set 方法添加 checked 属性
								return subitem
							});
						}
					});
					this.getReportContentHandle();
				}
			});
		},
		getReportContentHandle() {
			this.ok = 0;
			getReportContent(this.idArray).then((res) => {
				if (res.code == 200) {
					this.update_infoListData(res.data);
					this.data.forEach((item) => {
						if (item.children.length > 0) {
							item.children.forEach((val) => {
								this.idArray.forEach((e, index) => {
									if (val.id == e) {
										let isFinished = false;
										let echartid = val.id;
										let chartDom = document.getElementById(echartid);
										let myChart = echarts.init(chartDom);

										if (this.ok == 0) {
											this.$nextTick(() => {
												val.paramConfigCustom =
													res.data[index].paramConfigCustom;

												val.tableData = res.data[index].reportTable;
												val.tableData.titles = val.tableData.titles.map(
													(title) => ({
														label: title,
													})
												);

												val.tableData.titles.forEach((item, index) => {
													item.prop = "val" + index;
													item.isBtn = false;

													this.$forceUpdate();
													this.ok = 1;
												});
												if (
													val.paramConfigCustom.firstDimType == "EntityType"
												) {
													val.tableData.titles.push(
														{
															label: "关键词",
															prop: "text",
															isBtn: true,
														},
														{
															label: "类专利列表",
															prop: "list",
															isBtn: true,
														},
														// {
														// 	label: "操作",
														// 	prop: "option",
														// 	isBtn: true,
														// }
													);
												}
											});
										}

										let graph = res.data[index].reportGraph;
										if (!graph) {
											val.chartList = [];
										}
										// 展示图标 线形
										if (val.graphType == "LINE") {
											this.$nextTick(() => {
												let echartid = val.id;
												let chartDom = document.getElementById(echartid);
												let myChart = echarts.init(chartDom);
												let option;

												let table = res.reportTable;

												let graph = res.data[index].reportGraph;
												let series_list = [];
												let name_list = [];
												let decimalPointMaxLength = 0; //保留的小数点最大位
												graph.series.forEach((item) => {
													let data_list = [];
													item.forEach((val) => {
														data_list.push(Number(val.value));
														let index = val.value.toString().indexOf("."); //当前小数点 . 的位置索引
														if (index !== -1) {
															let len = val.value.toString().length - index - 1; //获取小数点的位数
															decimalPointMaxLength =
																decimalPointMaxLength > len
																	? decimalPointMaxLength
																	: len;
														}
													});
													series_list.push({
														name: item[0].name,
														type: "line",
														data: data_list,
													});
													name_list.push(item[0].name);
												});
												option = {
													title: {
														text: "",
													},
													tooltip: {
														trigger: "axis",
													},
													legend: {
														data: name_list,
														type: "scroll",
													},
													grid: {
														left: "5%",
														right: "5%",
														bottom: "5%",
														containLabel: true,
													},

													xAxis: {
														name: graph.axisName.xaxisName,
														nameRotate: 0, // 旋转90度
														nameGap: 30,
														nameLocation: "center",

														axisLabel: {
															//x轴文字的配置
															show: true,
															interval: 0, //使x轴文字显示全
														},

														type: "category",
														boundaryGap: false,
														data: graph.xaxis,
													},
													yAxis: {
														type: "value",
														name: graph.axisName.yaxisName,
														nameLocation: "middle",
														nameRotate: 90,
														nameGap: decimalPointMaxLength > 0 ? 60 : 40,

														axisLabel: {
															show: true,
															textStyle: {
																color: "#333333",
															},
															//y坐标轴标题截取
															formatter: function (params) {
																if (params.length > 18)
																	return params.substring(0, 18) + "..";
																else
																	return params.toFixed(decimalPointMaxLength == 0 ? 0 : 2);
															},
														},
													},
													series: series_list,
												};

												option && myChart.setOption(option);
												window.addEventListener("resize", function () {
													myChart.resize();
												});

												myChart.on("finished", (_) => {
													// this.isLoading = true
													if (!isFinished) {
														const name = val.name + "_" + val.id;
														this.downLoad(myChart, name);
														isFinished = true;
													}
												});
											});
										}

										// 饼形
										if (val.graphType == "PIE") {
											this.$nextTick(() => {
												let echartid = val.id;
												let chartDom = document.getElementById(echartid);
												let myChart = echarts.init(chartDom);
												let option;

												let graph = res.data[index].reportGraph;

												option = {
													tooltip: {
														trigger: "item",
													},
													legend: {
														orient: "vertical",
														left: "left",
													},
													grid: {
														left: "5%",
														right: "5%",
														bottom: "5%",
														containLabel: true,
													},
													series: [
														{
															name: "Access From",
															type: "pie",
															radius: "50%",
															data: graph.data,
															emphasis: {
																itemStyle: {
																	shadowBlur: 10,
																	shadowOffsetX: 0,
																	shadowColor: "rgba(0, 0, 0, 0.5)",
																},
															},
														},
													],
												};

												option && myChart.setOption(option);
												window.addEventListener("resize", function () {
													myChart.resize();
												});
												myChart.on("finished", (_) => {
													// this.isLoading = true
													if (!isFinished) {
														const name = val.name + "_" + val.id;
														this.downLoad(myChart, name);
														isFinished = true;
													}
												});
											});
										}

										// 散点图
										if (val.graphType == "SCATTER_PLOT") {
											this.$nextTick(() => {
												let echartid = val.id;
												let chartDom = document.getElementById(echartid);
												let myChart = echarts.init(chartDom);
												let option;

												let graph = res.data[index].reportGraph;
												option = {
													grid: {
														left: "5%",
														right: "5%",
														bottom: "5%",
														containLabel: true,
													},
													xAxis: {
														name: graph.axisName.xaxisName,
														nameRotate: 0, // 旋转90度
														nameGap: 40,
														nameLocation: "center",

														type: "category",
														data: graph.xaxis,
														boundaryGap: false,
														splitLine: {
															show: true,
														},
														axisLine: {
															show: false,
														},
														axisLabel: {
															interval: 0, // 强制显示所有标签
															rotate: 45, // 旋转角度
															formatter: function (value) {
																// 自定义截断处理函数
																if (value.length > 4) {
																	return value.substring(0, 4) + "..."; // 截断超过 4 个字符的名称
																} else {
																	return value;
																}
															},
														},
													},
													tooltip: {
														trigger: 'axis',
														axisPointer: {
															type: 'shadow' // 设置 axisPointer 为 'shadow'，使其在 Y 轴显示完整数据
														},
														position: 'bottom',
														formatter: function (params) {
															// 在 tooltip
															let tooltipContent = '';
															params.forEach(function (item) {
																let dataIndex = item.dataIndex;
																let seriesIndex = item.seriesIndex;
																let dataItem = graph.series[seriesIndex][dataIndex];
																let name = graph.xaxis[dataIndex];
																let xnameIndex = graph.yaxis.length - seriesIndex - 1; // 倒序索引
																let xname = graph.yaxis[xnameIndex]; // 倒序获取XNAME的值
																let value = dataItem.value;
																tooltipContent += name + ', ' + xname + ', ' + value + '<br>';
															});
															return tooltipContent;
														}
													},
													yAxis: {
														// type: "category",
														name: graph.axisName.yaxisName,
														nameLocation: "middle",
														nameRotate: 90,
														nameGap: 50,
														data: graph.yaxis,

														splitLine: {
															show: true,
														},

														axisLine: {
															show: false,
														},
														axisLabel: {
															interval: 0, // 强制显示所有标签
															formatter: function (value) {
																// 自定义截断处理函数
																if (value.length > 4) {
																	return value.substring(0, 3) + "..."; // 截断超过 6 个字符的名称
																} else {
																	return value;
																}
															},
														},
													},
													series: {
														// data: graph.series
													},
												};

												option.series = graph.series.map((item) => ({
													type: "scatter",
													emphasis: {
														focus: "series",
													},
													symbolSize: function (val) {
														return val * 2;
													},
													// name: item[0].name,
													data: item.map((val) => val.value),

												}));
												option && myChart.setOption(option);
												window.addEventListener("resize", function () {
													myChart.resize();
												});
												myChart.on("finished", (_) => {
													// this.isLoading = true
													if (!isFinished) {
														const name = val.name + "_" + val.id;
														this.downLoad(myChart, name);
														isFinished = true;
													}
												});
											});
										}

										// 柱状图
										if (val.graphType == "BAR") {
											this.$nextTick(() => {
												let echartid = val.id;
												let chartDom = document.getElementById(echartid);
												let myChart = echarts.init(chartDom);
												let option;

												let graph = res.data[index].reportGraph;
												option = {
													grid: {
														left: "5%",
														right: "5%",
														bottom: "5%",
														containLabel: true,
													},
													xAxis: {
														type: "category",
														data: graph.xaxis,
														name: graph.axisName.xaxisName,
														nameRotate: 0, // 旋转90度
														nameGap: 50,
														nameLocation: "center",
														axisLabel: {
															interval: 0, // 强制显示所有标签
															rotate: 45, // 旋转角度
															formatter: function (value) {
																// 自定义截断处理函数
																if (value.length > 6) {
																	return value.substring(0, 4) + "..."; // 截断超过 6 个字符的名称
																} else {
																	return value;
																}
															},
														},
													},
													tooltip: {
														trigger: "axis",
														axisPointer: {
															type: "shadow",
														},
													},
													legend: {},
													yAxis: {
														type: "value",
														data: graph.yaxis,
														name: graph.axisName.yaxisName,
														nameLocation: "middle",
														nameRotate: 90,
														nameGap: 30,
													},
													series: [],
												};

												option.series = graph.series.map((item) => ({
													type: "bar",

													data: item.map((val) => val.value),
												}));

												option && myChart.setOption(option);
												window.addEventListener("resize", function () {
													myChart.resize();
												});

												myChart.on("finished", (_) => {
													// this.isLoading = true
													if (!isFinished) {
														const name = val.name + "_" + val.id;
														this.downLoad(myChart, name);
														isFinished = true;
													}
												});
											});
										}

										// 堆积柱状图
										if (val.graphType == "BAR_STACK") {
											this.$nextTick(() => {
												let echartid = val.id;
												let chartDom = document.getElementById(echartid);
												let myChart = echarts.init(chartDom);
												let option;

												let graph = res.data[index].reportGraph;
												option = {
													tooltip: {
														trigger: "axis",
														axisPointer: {
															type: "shadow",
														},
													},
													legend: {},
													grid: {
														left: "5%",
														right: "5%",
														bottom: "5%",
														containLabel: true,
													},
													xAxis: [
														{
															name: graph.axisName.xaxisName,
															nameRotate: 0, // 旋转90度
															nameGap: 30,
															nameLocation: "center",
															type: "category",
															data: graph.xaxis,
														},
													],
													yAxis: [
														{
															type: "value",
															name: graph.axisName.yaxisName,
															nameLocation: "middle",
															nameRotate: 90,
															nameGap: 40,
														},
													],
													series: [],
												};

												option.series = graph.series.map((item) => ({
													type: "bar",
													emphasis: {
														focus: "series",
													},
													name: item[0].name,
													data: item.map((val) => val.value),
												}));

												option && myChart.setOption(option);
												window.addEventListener("resize", function () {
													myChart.resize();
												});
												myChart.on("finished", (_) => {
													// this.isLoading = true
													if (!isFinished) {
														const name = val.name + "_" + val.id;
														this.downLoad(myChart, name);
														isFinished = true;
													}
												});
											});
										}

										// 地图
										if (val.graphType == "MAP") {
											this.$nextTick(() => {
												let echartid = val.id;
												let chartDom = document.getElementById(echartid);
												let myChart = echarts.init(chartDom);
												let option;



												let graph = res.data[index].reportGraph;
												const mapData = graph.series[0];

												// 使用 ECharts 初始化地图
												echarts.registerMap("world", require("./map.json"));

												// ECharts 图表选项配置
												option = {
													tooltip: {
														// 使用 formatter 自定义提示框内容
														formatter: function (params) {
															// 获取当前鼠标悬停的国家名称和对应的值
															var name = params.name;
															var value = params.value;

															// 将值为 NaN 的情况替换为 "-"
															if (isNaN(value)) {
																value = '-';
															}

															// 返回自定义的提示框内容
															return name + ': ' + value;
														}
													},
													//左侧小导航图标
													visualMap: {
														show: true,
														x: "left",
														y: "center",
														splitList: [
															{
																start: 1000,
															},
															{
																start: 700,
																end: 999,
															},
															{
																start: 500,
																end: 699,
															},
															{
																start: 100,
																end: 499,
															},
															{
																start: 10,
																end: 99,
															},
															{
																start: 0,
																end: 10,
															},
														],
														color: [
															"#5475f5",
															"#9feaa5",
															"#85daef",
															"#74e2ca",
															"#e6ac53",
															"#9fb5ea",
														],
													},

													series: [
														{
															type: "map",
															map: "world",
															roam: true,
															name: item.name,
															data: mapData || '-',
														},
													],
												};

												option && myChart.setOption(option);
												window.addEventListener("resize", function () {
													myChart.resize();
												});
												myChart.on("finished", (_) => {
													// this.isLoading = true
													if (!isFinished) {
														const name = val.name + "_" + val.id;
														this.downLoad(myChart, name);
														isFinished = true;
													}
												});
											});
										}

										//关系图
										if (val.graphType == "RELATIONSHIP") {
											this.$nextTick(() => {
												let echartid = val.id;
												let chartDom = document.getElementById(echartid);
												let myChart = echarts.init(chartDom);
												let option;

												let graph = res.data[index].reportGraph;
												// graph.nodes.forEach((item) => {
												// 	item.symbolSize = item.symbolSize * 20;
												// });

												// 使用 ECharts 初始化地图

												// ECharts 图表选项配置
												option = {
													title: {
														text: "",
														subtext: "",
														top: "bottom",
														left: "right",
													},

													tooltip: {},
													legend: {
														data: graph.categories.map(function (a) {
															return a.name;
														}),
														type: "scroll",
														left: "left",
														// left: 'center',
														textStyle: {
															fontSize: 10,
														},
														formatter: function (params) {
															if (params.length > 8)
																return params.substring(0, 8) + "...";
															else return params;
														},
													},
													grid: {
														left: "5%",
														right: "5%",
														bottom: "5%",
														containLabel: true,
													},
													animationDuration: 1500,
													animationEasingUpdate: "quinticInOut",
													series: [
														{
															name: "Les Miserables",
															type: "graph",
															layout: "force",
															data: graph.nodes,
															links: graph.links,
															categories: graph.categories,
															symbolSize: 10,
															roam: true,
															label: {
																show: true,
																position: "right",
																formatter: function (params) {
																	// 截取文字
																	return params.name.length > 8
																		? params.name.slice(0, 8) + "..."
																		: params.name;
																},
															},
															labelLayout: {
																hideOverlap: true,
															},
															scaleLimit: {
																min: 0.4,
																max: 2,
															},
															lineStyle: {
																color: "source",
																curveness: 0.3,
															},
														},
													],
												};

												option && myChart.setOption(option);
												window.addEventListener("resize", function () {
													myChart.resize();
												});
												myChart.on("finished", (_) => {
													// this.isLoading = true
													if (!isFinished) {
														const name = val.name + "_" + val.id;
														this.downLoad(myChart, name);
														isFinished = true;
													}
												});
											});
										}

										//桑吉图
										if (val.graphType == "SANKEY") {
											this.$nextTick(() => {
												let echartid = val.id;
												let chartDom = document.getElementById(echartid);
												let myChart = echarts.init(chartDom);

												let graph = res.data[index].reportGraph;
												let title = [];
												let space = {};
												let len = 0;
												let tempdata = graph?.nodes;

												tempdata.map(function (v, k) {
													if (!space["depth" + v.depth]) {
														space["depth" + v.depth] = true;
														len++;
													}
												});

												//获取图形宽度，成熟度进入演化  或 普通宽度
												var divwidth1 = chartDom.clientWidth;
												let step = 89 / (len - 1) / 100;
												let boxWidth = divwidth1;
												for (let key in graph?.times) {
													if (space[key]) {
														title.push({
															text: graph.times[key],
															top: 15,
															left:
																boxWidth * 0.05 +
																step * title.length * boxWidth -
																30,
															textStyle: {
																width: "10%",
																fontSize: 12,
															},
														});
													}
												}

												// 使用 ECharts 初始化地图

												// ECharts 图表选项配置
												let option = {
													title: title,
													grid: {
														left: "3%",
														right: "4%",
														width: "100%",
														height: "100%",
														top: "0%",
														containLabel: true,
													},
													tooltip: {
														trigger: "item",
														triggerOn: "mousemove",
													},
													series: [
														{
															type: "sankey",
															left: "0%",
															layout: "none",
															right: "0%",
															top: 60,
															bottom: 20,
															data: graph.nodes,
															links: graph.links,
															emphasis: {
																focus: "adjacency",
															},
															lineStyle: {
																color: "gradient",
																curveness: 0.5,
															},
															label: {
																show: true,
																width: 120,
																overflow: "truncate",
															},
														},
													],
												};

												option && myChart.setOption(option);
												window.addEventListener("resize", function () {
													myChart.resize();
												});
												myChart.on("finished", (_) => {
													// this.isLoading = true
													if (!isFinished) {
														const name = val.name + "_" + val.id;
														this.downLoad(myChart, name);
														isFinished = true;
													}
												});
											});
										}
									}
									// let echartid = val.id;
									// let chartDom = document.getElementById(echartid);
									// let myChart = echarts.init(chartDom);
								});
							});
						}
					});
				} else {
					this.$message({
						message: res.msg,
						type: "error",
						showClose: true,
					});
				}
			});
		},

		handleNodeClick(node) {

			this.scrollToSection(node.id);
		},
		// file 文件
		dataURLtoFile(dataurl, filename) {
			var arr = dataurl.split(","),
				mime = arr[0].match(/:(.*?);/)[1],
				bstr = atob(arr[1]),
				n = bstr.length,
				u8arr = new Uint8Array(n);
			while (n--) {
				u8arr[n] = bstr.charCodeAt(n);
			}
			return new File([u8arr], filename, { type: mime });
		},


		base64ImgtoFile(dataurl, filename) {
			let arr = dataurl.split(",");
			let mime = arr[0].match(/:(.*?);/)[1];
			let suffix = mime.split("/")[1];
			let bstr = atob(arr[1]);
			let n = bstr.length;
			let u8arr = new Uint8Array(n);
			while (n--) {
				u8arr[n] = bstr.charCodeAt(n);
			}
			return new File([u8arr], `${filename}.${suffix}`, {
				type: mime,
			});
		},
		downLoad(myChart, fileName) {
			// let name = fileName.name +"_"+fileName.id
			let url = myChart.getDataURL({
				type: "png",
				pixelRatio: 1,
				backgroundColor: "#fff",
			});
			let blob = this.base64ImgtoFile(url, fileName);
			// let url2 = URL.createObjectUrl(blob)
			this.imgListCont.push(blob);
		},

		// 显示抽屉
		handShowDrawe(item, row, citem) {
			this.nodesort = citem.sort;
			if (item.prop === "text") {
				if (citem.sort == 1) {
					let params = new FormData();
					params.append("outlineParamId", citem.paramConfigCustom.id);
					params.append("clusterName", row.val1);
					params.append("timeRange", row.val3);
					getClusterkeywords(params)
						.then((res) => {
							this.textList = res.data;
							this.drawerText = true;
						})
						.catch((err) => { });
				} else {
					const a = {
						outlineParamId: citem.paramConfigCustom.id,
						timeRange: row.val1,
						pathId: row.val0,
					};
					let params = new FormData();

					params.append("outlineParamId", citem.paramConfigCustom.id);
					params.append("pathId", row.val0);
					params.append("timeRange", row.val1);

					getPathKeywords(params)
						.then((res) => {
							this.textList = res.data;
							this.drawerText = true;
						})
						.catch((err) => { });
				}
			} else {
				this.nodecurrent = 1;
				this.nodesize = 10;
				// 类专利
				this.midPush = {
					current: this.nodecurrent,
					size: this.nodesize,
					outlineParamId: citem.paramConfigCustom.id,
					NodeName: row.val1,
				};

				this.midPush2 = {
					current: this.nodecurrent,
					size: this.nodesize,
					outlineParamId: citem.paramConfigCustom.id,
					pathId: row.val0,
					timeRange: row.val1,
				};

				this.getClusterList();
			}
		},
		getClusterList() {
			if (this.nodesort == 1) {
				getClusterPatents(this.midPush)
					.then((res) => {
						this.dataList = res.data;
						this.drawerSubject = true;
					})
					.catch((err) => { });
			} else {
				getPathPatents(this.midPush2)
					.then((res) => {
						this.dataList = res.data;
						this.drawerSubject = true;
					})
					.catch((err) => { });
			}
		},
		// 分页
		handleSizeChange(val) {
		},
		handleCurrentChange(val) {
			this.nodecurrent = val;
			this.midPush.current = val;
			this.getClusterList();
		},
		// 关闭提示
		handMaskClose() {
			this.isMask = false;
			this.isTolTip = 1;
		},
		update_infoListData(e) {
			this.$forceUpdate();
		},
	},
};
</script>

<style lang="scss">
.tableRowClassName {
	.el-table__body-wrapper td .cellcell {
		padding: 12px !important;
	}
}

.addSecondLevelNodeDialog {
	.el-dialog__body {
		padding: 0 16px !important;
		height: 400px;
		overflow-y: scroll;
	}

	.el-checkbox {
		padding: 4px 10px;
		height: auto;
	}

	.el-checkbox__label {
		font-weight: normal;
		font-size: 12px;
	}
}

.addSecondNode {
	border: 1px solid #EBEEF5 !important;

	.el-collapse-item__header {
		padding: 0 12px !important;
		height: 36px !important;
		background: #EBEEF5 !important;
	}

	.el-collapse-item__content {
		padding: 12px !important;
	}
}

.el-popover.more-menu {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 100px !important;
	padding: 8px 0;

	button {
		margin: 0;
		width: 100%;
		border-radius: 0;
	}

	.el-button--text {
		font-weight: normal;
		color: #313131;

		&:hover {
			background: #4c56bb;
			color: #fff;
		}
	}
}

// .custom-tree-node__add .el-popover {
// 	padding: 20px;
// 	font-size: 12px;
// 	color: #333;
// }

.message-popover {
	padding: 10px !important;
	padding-bottom: 20px !important;
}

.report-content-temp-title .el-input__inner {
	border: none !important;
	color: #313131;
	padding: 0;
}

.report-content-temp-title1 .el-input__inner {
	border: none !important;
	color: #313131;
	padding: 0;
}

// .report-content-temp-text {

// }
// .el-input--prefix .el-textarea {
//   border: none;
//   background-color: rgba(255, 255, 255, 0);
// }
.inputaear .el-textarea__inner {
	border: none !important;
	resize: none;
}

.el-table .warning-row {
	background: #f9fafb;
}

.el-table .success-row {
	background: #fff;
}

.el-table--scrollable-x .el-table__body-wrapper {
	z-index: 1;
}

.el-table__body-wrapper {
	overflow-x: auto;
}

.el-table__body-wrapper::-webkit-scrollbar {
	height: 6px;
	/* 设置滚动条高度 */
}

.del-btn {
	background: #fff5f4;
	border-radius: 6px 6px 6px 6px;
	color: #ff3838;
}

.popover-list {
	padding: 0 24px;
	box-sizing: border-box;
	// display: flex;
	// flex-direction: column;
	// justify-content: center;
	// align-items: center;
}

.popover-item {
	margin-top: 14px;
	font-size: 14px;
	color: #313131;
	font-style: normal;
	cursor: pointer;
}

.el-table .el-table__header th {
	background: #f9fafb;
}

.el-range-editor--mini .el-range-separator {
	line-height: 32px;
}

.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
	border-color: #4c56bb;
	background: #4c56bb;
}

.el-radio__input.is-checked .el-radio__inner {
	border-color: #4c56bb;
	background: #4c56bb;
}

.thr-select {
	flex: 1 !important;
	height: 28px;
	background: #ffffff;
	border-radius: 6px;
	opacity: 1;
	border: 1px solid #e7e7e7;
	position: relative;
	box-sizing: border-box;
	cursor: pointer;
	padding: 8px 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.thr-select-playolder {
		font-size: 14px;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #a7a7a7;
		line-height: 24px;
		width: 140px;
		white-space: nowrap;
		/*规定段落中的文本不进行换行*/
		overflow: hidden;
		/*内容会被修剪，并且其余内容是不可见的。*/
		text-overflow: elli;
	}

	.thr-select-name {
		color: #000000;
	}

	.thr-select-line {
		width: 1px;
		height: 100%;
		background: #d7dfe9;
		margin-right: 8px;
	}

	.thr-select-icon {
		font-size: 16px;
		color: #d7dfe9;
	}

	.thr-select-popup {
		width: 320px;
		// height: auto;
		max-height: 266px;
		position: absolute;
		top: 44px;
		left: -90px;
		padding: 24px;
		box-sizing: border-box;
		z-index: 9;
		background: #fff;
		border-radius: 6px;
		box-shadow: 0px 8px 24px 0px rgba(76, 86, 187, 0.2);
		overflow-y: scroll;
	}

	.thr-select-ul {
		margin-top: 16px;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.thr-select-li {
		height: 24px;
		display: flex;
		align-items: center;
		margin-bottom: 14px;
		font-size: 14px;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 24px;
		cursor: pointer;

		&>span {
			margin-left: 4px;
		}
	}
}

// .el-scrollbar .el-scrollbar__wrap {
//         overflow-x: hidden !important;
//       }
//       .el-tree > .el-tree-node {
//         height: 350px; //这里的高根据实际情况
//         min-width: 100%;
//         display: inline-block;
//       }
.tabler-tr {
	display: flex;
}

.analyzepage-dialog {
	.el-dialog__header {
		padding: 24px;
	}

	.el-dialog__body {
		padding: 0 24px;
	}

	.el-dialog__footer {
		padding: 24px;
	}

	.analyzepage-dialog__body {
		.analyzepage-dialog__body-temp {
			width: 100%;
			display: flex;
			align-items: center;
			height: 46px;
			margin-bottom: 24px;

			&:last-child {
				margin-bottom: 0 !important;
			}

			&>div {
				width: fit-content;
				font-size: 14px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 24px;
				margin-right: 24px;
			}

			.analyzepage-dialog__body-temp-ipt {
				flex: 1;
				height: 100%;
			}
		}

		.upload-demo {
			width: 100% !important;
			border-radius: 0 !important;

			.el-upload {
				width: 100% !important;
				margin-bottom: 24px;
			}

			.el-upload-dragger {
				width: 100% !important;
				border-radius: 0 !important;
			}

			.el-upload__text {
				font-size: 14px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #313131;
				line-height: 24px;
				margin-bottom: 10px;
			}

			.upload-demo-upload {
				font-size: 14px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #4c56bb;
				line-height: 24px;
				cursor: pointer;
			}

			.upload-demo-img {
				width: 60px;
				height: 60px;
				border-radius: 0px 0px 0px 0px;
				opacity: 1;
				margin-bottom: 10px;
			}

			.el-upload-dragger {
				padding-top: 16px;
			}
		}
	}
}

.report-header-loginout {
	margin-left: 8px;
	color: red;
	cursor: pointer;
}

.report-left-tree {
	.el-tree {
		background: transparent !important;
		overflow-y: scroll;
		height: calc(100vh - 200px);
		padding-right: 16px;
		box-sizing: border-box;


		.el-tree-node__expand-icon {
			padding-left: 0 !important;
			color: #000;
		}

		.is-leaf {
			color: transparent !important;
			display: none;
		}



		.custom-tree-node {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 4px;
			position: relative;

			.custom-tree-node__label {
				// width: calc(100% - 60px);
				font-size: 13px;
				color: #313131;
				line-height: 16px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				// .custom-tree-node__label__name{
				// 	width: 90%;
				// 	overflow: hidden;
				// white-space: nowrap;
				// text-overflow: ellipsis;
				// }

			}

			.custom-tree-node__add {
				// width: 34px;
				display: none;

				div {
					display: flex;
					gap: 4px;
					justify-content: flex-end
				}
			}
		}

		.el-tree-node__content {
			height: 36px !important;

			&:hover {
				.custom-tree-node__label {
					color: #4c56bb !important;
				}

				.custom-tree-node__add {
					display: inline-block;
					color: #4c56bb !important;
				}
			}
		}
	}
}

.switch-wrapper {
	margin: 8px 0;

	.switch-title {
		margin-bottom: 6px;
		font-weight: 600;
	}

	.switch-content {
		display: flex;
	}

	.switch-text {
		margin-left: 8px;
	}
}

.report-content-right-btn {
	.el-button {
		width: 100% !important;
		background: #4c56bb !important;
		height: 40px;
		border: none;
	}
}

.report-btn-btn {
	width: fit-content;
	height: 40px;
	background: #ffffff;
	border-radius: 6px;
	opacity: 1;
	border: 1px solid #4c56bb;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	font-size: 14px;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	color: #4c56bb;
	line-height: 24px;
	cursor: pointer;

	&>i {
		margin-left: 8px;
	}

	padding: 0 15px;
}

.report-left {
	margin-left: 8px;
}

.report-popup {
	padding: 16px 24px !important;

	.el-popover__title {
		font-size: 14px;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 16px;
		margin-bottom: 14px !important;
	}

	.report-popup-centen {
		&>div {
			font-size: 14px;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #313131;
			line-height: 16px;
			height: 20px;
			width: 100%;
			margin-bottom: 12px;

			&:last-child {
				margin: 0 !important;
			}

			cursor: pointer;
		}
	}
}

.report-text-drawer {
	width: 326px !important;
	padding: 16px 24px !important;
	box-sizing: border-box;

	.el-drawer__header {
		box-sizing: border-box;
		padding: 0 0 24px 0 !important;
		border-bottom: 1px solid #e7e7e7;
		font-size: 20px;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		color: #000000;
		line-height: 20px;
		margin-bottom: 24px !important;
	}

	.report-text-box {
		height: calc(100% - 64px);
		width: 100%;

		.report-text-box-header {
			height: 32px;
			width: 100%;
		}

		.report-text-box-temp {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 14px;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #313131;
			line-height: 12px;
			height: 32px;
			width: 100%;
		}

		.report-text-box-body {
			height: calc(100% - 32px - 24px);
			width: 100%;
			overflow: auto;
			margin-bottom: 24px;
			overflow-x: hidden;
		}

		.report-text-box-btm {
			width: 100%;
			height: 40px;
			background: #4c56bb;
			border-radius: 6px;
			opacity: 1;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			font-family: Inter, Inter;
			font-weight: 500;
			color: #ffffff;
			line-height: 24px;
		}
	}
}

.report-subject-drawer {
	width: 621px !important;
	padding: 16px 24px !important;
	box-sizing: border-box;

	.el-drawer__header {
		box-sizing: border-box;
		padding: 0 0 24px 0 !important;
		border-bottom: 1px solid #e7e7e7;
		font-size: 20px;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		color: #000000;
		line-height: 20px;
		margin-bottom: 24px !important;
	}

	.report-subject-right-body {
		height: calc(100% - 64px);
		width: 100%;
		overflow-y: auto;

		.report-subject-right-temp {
			height: auto;
			width: 100%;
			position: relative;
			background: #ffffff;
			border-bottom: 1px solid #e7e7e7;
			box-sizing: border-box;
			padding: 0 0 24px 32px;
			cursor: pointer;
			margin-bottom: 24px;
		}

		.report-subject-right-temp-checkbox {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}

		.report-subject-right-temp-body {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;

			.report-subject-right-temp-title {
				font-size: 16px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				color: #4c56bb;
				line-height: 19px;
				margin-bottom: 8px;
			}

			.report-subject-right-temp-content {
				flex: 1;
				font-size: 14px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #939393;
				line-height: 16px;
			}

			.report-subject-right-temp-ul {
				display: flex;
				align-items: center;
				height: 24px;
				width: 100%;

				.report-subject-right-temp-li {
					height: 24px;
					background: #ffffff;
					border-radius: 6px;
					opacity: 1;
					border: 1px solid #d7dfe9;
					box-sizing: border-box;
					font-size: 12px;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #5e718d;
					line-height: 20px;
					padding: 0 8px;
				}
			}
		}
	}

	.report-subject-right-btm {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 28px;
		margin-top: 24px;
	}
}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.el-checkbox {
	font-size: 12px !important;
}

.el-checkbox.is-bordered+.el-checkbox.is-bordered {
	margin: 0;
}

.addSecondLevelNode {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 8px;

	.el-checkbox {
		margin-right: 0 !important;
	}
}

.report {
	// width: 100%;
	height: 100%;
	background: #f3f6f9;
	display: flex;
	flex-direction: column;
	position: relative;
	flex: 1;

	.report-header {
		width: 100%;
		height: 63px;
		background: #4c56bb;
		border-radius: 0px 0px 0px 0px;
		opacity: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24px;
		box-sizing: border-box;
		// position: fixed;

		.report-header-img {
			width: 236px;
			height: 31px;
			background: url("./assets/images/title.png") no-repeat;
			background-size: 100%;
			cursor: pointer;
		}

		.report-header-admin {
			display: flex;
			align-items: center;
			width: auto;

			.report-header-admin__img {
				display: flex;
				align-items: center;
				gap: 8px;

				.user-img {
					width: 32px;
					height: 32px;
					border-radius: 50px;
				}
			}

			.report-header-admin__name {
				font-size: 14px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #ffffff;
				line-height: 16px;
				margin-right: 8px;
			}

			.report-header-admin__icon {
				color: #fff;
				font-size: 14px;
				cursor: pointer;
			}
		}
	}

	.report-body {
		// height: calc(100% - 63px);
		height: 100%;

		display: flex;
		flex-direction: column;
	}

	.report-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 998;

		.report-mask-toltip {
			width: 220px;
			height: 112px;
			position: absolute;
			background: #fff;
			border-radius: 8px;
			background: #fff;
			box-shadow: 0px 8px 24px 0px rgba(76, 86, 187, 0.2);
			z-index: 999;
			padding: 16px;
			box-sizing: border-box;

			.report-mask-toltip-centen {
				font-size: 16px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 19px;
				margin-bottom: 12px;
			}

			.report-mask-toltip-btm {
				font-size: 16px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #4c56bb;
				line-height: 19px;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}

		.toltip-one {
			top: 90px;
			left: 160px;

			&::after {
				content: " ";
				width: 0;
				height: 0;
				border-top: 8px solid transparent;
				border-right: 16px solid #fff;
				border-bottom: 8px solid transparent;
				position: absolute;
				top: 50%;
				left: -16px;
				transform: translate(0, -50%);
			}
		}

		.toltip-two {
			top: 400px;
			left: 900px;

			&::after {
				content: " ";
				width: 0;
				height: 0;
				border-top: 8px solid transparent;
				border-right: 16px solid #fff;
				border-bottom: 8px solid transparent;
				position: absolute;
				top: 50%;
				left: -16px;
				transform: translate(0, -50%);
			}
		}

		.toltip-three {
			top: 90px;
			right: 340px;
			height: 134px !important;

			&::after {
				content: " ";
				width: 0;
				height: 0;
				border-top: 8px solid transparent;
				border-left: 16px solid #fff;
				border-bottom: 8px solid transparent;
				position: absolute;
				top: 50%;
				right: -16px;
				transform: translate(0, -50%);
			}
		}

		.toltip-four {
			top: 30px;
			right: 120px;

			&::after {
				content: " ";
				width: 0;
				height: 0;
				border-top: 8px solid transparent;
				border-left: 16px solid #fff;
				border-bottom: 8px solid transparent;
				position: absolute;
				top: 50%;
				right: -16px;
				transform: translate(0, -50%);
			}
		}
	}

	.report-title {
		width: 100%;
		min-height: 65px;
		background: #ffffff;
		border-bottom: 1px solid #e7e7e7;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		padding: 0 24px;
		justify-content: space-between;

		.report-btn {
			display: flex;
			align-items: center;
		}

		.report-btn-add {
			height: 24px;
			width: fit-content;
			display: flex;
			align-items: center;
			cursor: pointer;
			position: relative;

			&>img {
				width: 24px;
				height: 24px;
				margin-right: 4px;
			}

			margin-right: 80px;

			.report-btn-add-title {
				font-size: 14px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 16px;

				&:hover {
					color: #4c56bb !important;
				}
			}

			.report-btn-add-popup {
				position: absolute;
				top: 40px;
				right: 0;
				width: 600px;
				height: 400px;
				border-radius: 8px;
				background: #fff;
				box-shadow: 0px 8px 24px 0px rgba(76, 86, 187, 0.2);
				z-index: 14;
				padding: 24px;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				.report-btn-add-popup-left {
					width: 150px;
					height: 100%;
					background: #f4f6f9;
					border-radius: 8px;
					overflow: auto;
					font-size: 14px;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #000000;
					padding: 12px 12px 0;
					box-sizing: border-box;
					line-height: 16px;

					.report-btn-add-popup-left-li {
						height: 36px;
						width: 100%;
						border-radius: 8px;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						margin-bottom: 12px;
						padding: 0 8px;
						box-sizing: border-box;
					}

					.report-btn-add-popup-left-li-select {
						background: #4c56bb;
						color: #fff !important;
					}
				}

				.report-btn-add-popup-right {
					display: flex;
					align-items: flex-start;
					flex-wrap: wrap;
					height: 100%;
					width: 100%;
					padding: 12px;
					box-sizing: border-box;

					.report-btn-add-popup-right-li {
						border: 1px solid #e7e7e7;
						padding: 8px 16px;
						font-size: 14px;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #000000;
						margin-right: 8px;
						cursor: pointer;
						border-radius: 8px;
					}
				}
			}
		}
	}

	.report-go {
		width: fit-content;
		font-size: 24px;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #313131;
		line-height: 16px;
		cursor: pointer;

		&>i {
			color: #313131 !important;
			margin-right: 8px;
		}
	}

	.report-content {
		width: calc(100vw - 92px);
		flex: 1;
		display: flex;
		// margin-top: 63px;

		.report-content-left {
			flex: 0 0 auto;
			// width: 240px;
			width: 240px;
			/* 设置最小宽度 */
			min-width: 240px;
			max-width: 400px;
			/* 设置最大宽度 */
			border-right: 3px solid #f3f6f9;
			cursor: ew-resize;
			/* 设置鼠标指针样式为水平调整大小的箭头 */
			height: 100%;
			// padding: 24px;
			padding-left: 16px;
			padding-top: 24px;
			// padding-bottom: 24px;
			box-sizing: border-box;
			overflow-x: hidden;

			.report-left-title {
				font-size: 14px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				color: #313131;
				line-height: 19px;
				height: 22px;
				margin-bottom: 24px;
				padding-right: 16px;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}

		.report-content-body {
			flex: 1;
			height: calc(100vh - 128px);
			// height: 100%;

			background: #ffffff;
			padding: 24px 24px;
			box-sizing: border-box;
			overflow: scroll;
			width: 0;

			.report-content-title {
				height: 56px;
				font-size: 40px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				color: #313131;
				line-height: 47px;
				width: 100%;
				margin-bottom: 24px;
			}

			.report-content-date {
				height: 20px;
				font-size: 14px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #6c6c6c;
				line-height: 16px;
				width: 100%;
				margin-bottom: 24px;
			}

			.report-content-box {
				// height: calc(100% - 172px);
				width: 100%;
				overflow-x: hidden;
				overflow-y: auto;
				margin-top: 24px;

				.report-content-temp {
					height: auto;

					.report-content-temp-text {
						width: 100%;
						height: auto;
						padding: 16px;
						box-sizing: border-box;
						font-size: 16px;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #313131;
						line-height: 30px;
						margin-bottom: 8px;
					}

					.report-content-temp-texted {
						width: 100%;
						height: auto;
						padding-top: 16px;
						box-sizing: border-box;
						font-size: 16px;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #313131;
						line-height: 30px;
						margin-bottom: 8px;
					}

					.report-content-temp-title {
						width: 100%;
						box-sizing: border-box;
						font-size: 16px;
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						color: #313131;
						margin-bottom: 8px;

						.el-input {
							.el-input__inner {
								border: none !important;
							}
						}
					}

					.report-content-temp-title1 {
						padding-left: 24px;
						width: 100%;
						box-sizing: border-box;
						font-size: 14px;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #313131;
						margin-bottom: 8px;
					}

					.report-content-temp-chart {
						height: auto;
						width: 100%;
						position: relative;

						&>i {
							font-size: 24px;
							color: #000000;
							position: absolute;
							top: -20px;
							right: 0px;
							z-index: 1;
							cursor: pointer;
							// width: 100%;
						}

						.report-content-temp-chart-temp {
							height: 500px;
							width: 100%;

							.report-content-temp-chart-box {
								height: calc(100% - 44px);
								// height: 800px;
								// width: 100% !important;
							}
						}

						.report-content-temp-chart-title {
							font-size: 14px;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							color: #313131;
							line-height: 16px;
							height: 20px;
							margin: 12px 0;
							text-align: center;
						}
					}

					.report-content-temp-table {
						position: relative;

						&>i {
							font-size: 24px;
							color: #000000;
							position: absolute !important;
							top: -20px;
							right: -0px;
							z-index: 1;
							cursor: pointer;
						}
					}

					.tabler-tr {
						display: flex;
						width: 100%;
					}

					.textflow {
						overflow: hidden; //超出文本隐藏
						white-space: nowrap; //不换行，只显示一行
						text-overflow: ellipsis; //超出部分省略号显示
					}

					.tabler-tr-item {
						display: flex;
						width: 25%;
						border: 1px solid #dddddd;
						background-color: #f2f2f2;
						justify-content: center;
						align-content: center;
						padding: 8px;
						box-sizing: border-box;
					}
				}
			}
		}

		.report-content-right {
			flex: 0 0 auto;
			// width: 240px;
			width: 340px;
			/* 设置最小宽度 */
			min-width: 340px;
			max-width: 440px;
			/* 设置最大宽度 */
			cursor: ew-resize;
			/* 设置鼠标指针样式为水平调整大小的箭头 */

			font-size: 13px;
			padding: 24px 24px 0 24px;
			box-sizing: border-box;

			.el-divider__text {
				background: #f3f6f9;
			}

			.report-content-right-model {
				font-size: 16px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				color: #313131;
				line-height: 19px;
				cursor: pointer;

				&>i {
					margin-right: 4px;
				}
			}

			.report-content-right-nomodel {
				.datafilter-dialog__body-temp {
					width: 100%;
					display: flex;
					align-items: center;
					height: 46px;
					margin-top: 15px;

					&:last-child {
						margin-bottom: 0 !important;
					}

					&>div {
						width: fit-content;
						font-size: 14px;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #000000;
						line-height: 24px;
						margin-right: 24px;
					}

					.datafilter-dialog__body-temp-ipt {
						flex: 1;
						height: 100%;
					}
				}

				.report-content-right-title {
					font-size: 16px;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					color: #313131;
					line-height: 19px;
					margin-bottom: 24px;
					cursor: pointer;

					&>i {
						margin-right: 4px;
					}
				}

				.report-content-right-tiao {
					margin: 12px 0;
					width: 100%;
					display: flex;
					align-items: center;

					.report-content-right-tiao-label {
						// width: 120px;
						font-size: 14px;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #000000;
						// line-height: 24px;
						margin-right: 24px;
					}

					.report-content-right-tiao-box {
						// width: calc(100% - 120px);
						// flex: 1;
						padding-right: 0 !important;
					}
				}

				.report-content-right-btn {
					margin-top: 12px;
					width: 100%;
				}
			}
		}
	}
}
</style>
